<template>
	<div class="page">
		<Head />
		<div class="mainBody">
			<div class="user routerView">
				<div class="leftMenu">
					<leftAside></leftAside>
				</div>
				<div class="rightView">
					<div class="transactionRecord">
						<div class="card">
							<div class="cardTitle">
								<div>Hòm thư</div>
							</div>
							<div class="cardBody">
								<p class="bodyTitle"><span>Có thể xem lịch sử giao dịch 90 ngày gần nhất</span></p>
								<el-form :model="form" label-width="120px">
									<el-form-item label="Loại hình:">
										<div class="selectItem">
											<el-select v-model="form.value1" placeholder="请选择">
												<el-option label="AG" value="1"></el-option>
												<el-option label="WM" value="2"></el-option>
											</el-select>
										</div>
									</el-form-item>
									<el-form-item label="Thời gian:">
										<div class="selectItem">
											<el-date-picker
											size="mini"
											v-model="value2"
											type="daterange"
											range-separator="to"
											start-placeholder="开始日期"
											end-placeholder="结束日期">
											</el-date-picker>
											<el-radio-group class="btnGroup" v-model="form.radioV" size="mini">
												<el-radio-button label="Hôm nay" ></el-radio-button>
												<el-radio-button label="Hôm qua"></el-radio-button>
												<el-radio-button label="7 ngày gần đây"></el-radio-button>
												<el-radio-button label="30 ngày gần đây"></el-radio-button>
												<el-radio-button label="Tìm kiếm"></el-radio-button>
												<el-radio-button label="Đặt lại"></el-radio-button>
											</el-radio-group>
											<el-button @click="submit()" class="submitButton inquire">Tìm kiếm</el-button>
											<el-button class="submitButton inquire">Đặt lại</el-button>
										</div>
									</el-form-item>
								</el-form>
							</div>
						</div>
						<div class="rechargeRecordTable">
							<div class="card">
								<div class="cardBody noPadding">
									<el-table size="mini" class="tableData" v-loading="loading" :data="tableData" style="width: 100%;height: 500px;">
										<el-table-column prop="field1" label="số thứ tự" align="center">
										</el-table-column>
										<el-table-column prop="field2" label="Thời gian" align="center">
										</el-table-column>
										<el-table-column prop="field3" label="Hình thức" align="center">
										</el-table-column>
										<el-table-column prop="field4" label="Phương thức" align="center">
										</el-table-column>
										<el-table-column prop="field5" label="Số tiền" align="center">
										</el-table-column>
										<el-table-column prop="field6" label="Ghi chú" align="center">
										</el-table-column>
									</el-table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Head from '@/components/Head.vue'
	import leftAside from '@/components/aside.vue'
	export default {
		components: {
			Head,
			leftAside
		},
		data() {
			return {
				tableData: [{
					field1: 'xxx',
					field2: '2016-05-03',
					field3: 'xxx',
					field4: 'xxx',
					field5: 'xxx',
					field6: 'xxx',
				},],
				loading: false,
				form: {
					value1: 'BBIN',
					value2: 'BBIN',
					radioV: '',
				},
			};
		},
		methods: {
			submit(){
				this.loading = true
				setTimeout(() => {
				// 加载状态结束
				this.loading = false;
				}, 2000);
			}
		}
	}
</script>
